<template>
  <div class="logo">
    <transition name="layout-logo-fade">
      <router-link v-if="isActive"  to="/">
        <img :src="setting.logo" class="layout-logo">
      </router-link>
      <router-link v-else  to="/">
        <img :src="setting.logo3" class="layout-logo-text">
      </router-link>
    </transition>
  </div>
</template>

<script setup lang="ts">
import setting from '@/setting';
import { computed, ref } from 'vue';
const pops=defineProps(['isActive'])
const isActive=computed(()=>pops.isActive)
</script>

<style lang="scss" scoped>
.logo {
  width: $base-menu-width;
  height: $base-logo-height;
  transition: all 0.35s;
  .layout-logo {
    width: $base-menu-min-width ;
    height:100% ;
  }
  .layout-logo-text{
    width:$base-menu-width;
    height: 100%;
  }
}

.layout-logo-fade-enter-active,
.layout-logo-fade-leave-active {
  transition: opacity 0.35s ease;
}

.layout-logo-fade-enter-from,
.layout-logo-fade-leave-to {
  opacity: 0;
}
</style>
